<template>
	<view class="box">
		<uni-nav-bar class="navbar" shadow left-icon="left" @clickRight="back2" @clickLeft="back" rightIcon="closeempty"
			leftText="返回" />

		<view class="qiye">

			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item labelWidth="90px" required name="qyname" label="企业名称" labelAlign="right">
					<uni-easyinput v-model="valiFormData.qyname" placeholder="填写名称" />
				</uni-forms-item>
				<view class="qiye-title">
					<text>运营者信息</text>
				</view>
				<view>
					<uni-forms-item labelWidth="90px" required name="yyname" label="运营者姓名" labelAlign="right">
						<uni-easyinput v-model="valiFormData.yyname" placeholder="运营者姓名" />
					</uni-forms-item>
				</view>
				<view>
					<uni-forms-item labelWidth="90px" required name="phone" label="手机号" labelAlign="right">
						<uni-easyinput v-model="valiFormData.phone" placeholder="手机号" />
					</uni-forms-item>
				</view>
				<view>
					<uni-forms-item labelWidth="90px" required name="email" label="邮箱" labelAlign="right">
						<uni-easyinput v-model="valiFormData.email" placeholder="联系邮箱" />
					</uni-forms-item>
				</view>
				<view class="">
					<view class="qiye-title">
						<text></text>
					</view>
					<view class="qiye-picker">
						<uni-forms-item labelWidth="90px" required name="classes" label="企业分类" labelAlign="right">
							<uni-data-picker placeholder="请选择企业类型" popup-title="请选择企业类型" :localdata="dataTree"
								v-model="valiFormData.classes" @nodeclick="onnodeclick">
							</uni-data-picker>
						</uni-forms-item>
					</view>

					<uni-forms-item labelWidth="90px" required name="capital" label="注册资金" labelAlign="right">
						<uni-easyinput v-model="valiFormData.capital" placeholder="请以万元为单位" />
					</uni-forms-item>
					<uni-forms-item labelWidth="90px" required name="creditcode" label="统一社会信用代码" labelAlign="right">
						<uni-easyinput v-model="valiFormData.creditcode" />
					</uni-forms-item>
				</view>

				<view class="qiye-title">
					<text>营业执照</text>
				</view>
				<uni-forms-item name="license">
					<view class="content">
						<view class="img" v-model="valiFormData.license" v-for="(imgPath,index) in imgPaths"
							:key="index">
							<image class="img_img" :src="imgPath"></image>
						</view>
						<view class="button" @click="choose">
							<button>上传图片</button>
						</view>
					</view>
				</uni-forms-item>

			</uni-forms>

			<button type="primary" @click="submit('valiForm')">提交</button>
		</view>
	</view>
</template>

<script>
	import axios from "axios"
	import Cookies from "js-cookie"
	export default {
		data() {
			return {
				username:'',
				title: 'Hello',
				imgPaths: '1',
				dataTree: [{
						text: "服装配饰",
						value: "1",
					},
					{
						text: "餐饮食品",
						value: "2",
					},
					{
						text: "生活服务",
						value: "3",
					},
					{
						text: "数码设备",
						value: "4",
					},
				],
				// 校验表单数据
				valiFormData: {
					qyname: '',
					yyname: '',
					phone: '',
					email: '',
					classes: '',
					capital: '',
					creditcode: '',
					license: ''
				},
				// 校验规则
				rules: {
					qyname: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					yyname: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}, {
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg = /^1[0-9]{10}$/
								if (!iphoneReg.test(value)) {
									callback('手机号码格式不正确，请重新填写')
								}
								return true
							}
						}]
					},
					email: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}, {
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/
								if (!iphoneReg.test(value)) {
									callback('邮箱格式不正确，请重新填写')
								}
								return true
							}
						}]
					},
					classes: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					capital: {
						rules: [{
								required: true,
								errorMessage: '不能为空'
							},
							{
								format: 'number',
								errorMessage: '请输入数字并以万元为单位'
							}
						]
					},
					creditcode: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}, {
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg =
									/^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/
								if (!iphoneReg.test(value)) {
									callback('社会信用代码格式不正确，请重新填写')
								}
								return true
							}
						}]
					},
					license: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
				},
				
				imageStyles: {
					width: 100,
					height: 100,
				},
				value: [{
					"name": "file.txt",
					"extname": "txt",
					"url": "https://xxxx",
					// ...
				}]
			}
		},
		mounted() {
			this.username = Cookies.get('username')
		},
		methods: {
			choose(e) {
				var me = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						// console.log(me.imgPaths);
						me.imgPaths = res.tempFilePaths;
						// console.log(me.imgPaths);
						me.valiFormData.license = "1";
						uni.uploadFile({
							url: 'http://localhost:8081/uploadImg', 
							filePath: me.imgPaths[0],
							name: 'uploadFile',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								console.log("111111111");
								console.log(uploadFileRes.data);
								me.valiFormData.license = uploadFileRes.data
							}
						});
					}
				});
			},
			
			onnodeclick(e) {
				console.log("选择：" + e.text);
				this.valiFormData.classes = e.text
			},

			handleSexValue(e) {
				this.valiFormData.sex = e.detail.value;
			},
			
			submit(ref) {
				
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).then(res =>{
					const name = this.username
					const qyname = this.valiFormData.qyname
					const yyname = this.valiFormData.yyname
					const phone = this.valiFormData.phone
					const email = this.valiFormData.email
					const classes = this.valiFormData.classes
					const capital = this.valiFormData.capital
					const creditcode = this.valiFormData.creditcode
					const img = this.valiFormData.license
					axios.post('/api/qyrenzheng?qyname='+qyname+'&yyname='+yyname
					+'&phone='+phone+'&email='+email+'&classes='+classes+'&capital='+capital
					+'&creditcode='+creditcode+'&img='+img+'&username='+name)
					.then(res =>{
						uni.showToast({
							title:'提交成功'
						})
						
					}).then(res =>{
						uni.switchTab({
							url:'/pages/my/my'
						})
					})
				})
				.catch(err => {
					console.log('err', err);
				});

			},

			goLogin() {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			back2() {
				uni.switchTab({
					url: '/pages/my/my'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		width: 100%;
		height: 100%;

		.navbar {
			width: 100%;
			height: 100%;
			position: sticky;
			top: 0;
			z-index: 100;
		}
	}

	.qiye {
		width: 100%;
		height: 100%;
		padding: 0 5% 100rpx 5%;
	}

	.qiye-title {

		padding: 5px 2%;
		background-color: #CCCCCC;
		color: #666666;
	}

	.content {
		display: flex;
		align-items: flex-end;
		padding: 10rpx;
	}

	.img {
		width: 100px;
		height: 100px;
		border: 1px solid black;
		display: flex;
		flex-direction: column;

		.img_img {
			width: 100%;
			height: 100%;
		}
	}

	.button {
		width: 300rpx;
		height: 100rpx;
		font-size: 32rpx;
		margin-left: 20rpx;
	}
</style>
